<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计数型控制图</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="计数型控制图">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<script type="text/javascript" src="../../script/chart-import.js"></script>
<style type="text/css">
html, body {height: 100%;}
.chart_container{width: calc(100% - 20px); height: calc(100% - 30px); padding: 20px 10px 10px 10px;}
#chart{width: 100%; height: 100%;}
</style>
</head>
<body id="sampleRunning">
<div class="chart_container">
	<div id="chart"></div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
	el: "#sampleRunning",
	data: {
		ckConfig: {},
		cl: "",
		ucl: "",
		lcl: "",
		sampleData: []
	},
	init: function() {
		var _self = this;
		this.$nextTick(function() {
			_self.getChartData(_self);
		});
	},
	methods: {
		renderChart: function(_self, data) {
			//console.log(data);
			//console.log(_self.ckConfig);
			var graphType = _self.ckConfig.GRAPH_TYPE;
			var xAxisData = [];
			var seriesData = [];
			var uclData = [];
			var lclData = [];
			var maxArr = [], minArr = [];
			var yAxisName = "";
			var series = [];
			var precision = 0;	//y轴精确位数
			$.each(data, function(i, v) {
				xAxisData.push(i + 1);
				if(graphType === "nP" || graphType === "C"){
					seriesData.push(v.BADCOUNT);
				}
				if(graphType === "P" || graphType === "U"){
					seriesData.push(_.round(v.badRate/100, 4));
					uclData.push(v.ucl);
					lclData.push(v.lcl);
					precision = 2;
				}
			});
			maxArr = _.concat([], seriesData);
			if(graphType === "nP" || graphType === "C"){
				yAxisName = graphType === "nP" ? "不合格品数" : "缺陷数";
				maxArr.push(_self.lcl);
				maxArr.push(_self.ucl);
				series = [{
					type: "line",
					name: yAxisName,
					data: seriesData,
					itemStyle: {
						color: function(ps) {
							//console.log(ps);
							if(_self.sampleData[ps.dataIndex].IS_CONTROL === "N"){
								return "#f00";
							} else {
								return "#4876FF";
							}
						}
					},
					lineStyle: {
						color: "#4876FF"
					},
					markLine: {
						symbol: "none",
						label: {
							position: "end"
						},
						lineStyle: {
							color: "#f00"
						},
						data: [{
							name: "UCL",
							yAxis: _self.ucl,
							label: {
								formatter: "{b} = " + _self.ucl
							}
						},{
							name: "CL",
							yAxis: _self.cl,
							label: {
								formatter: "{b} = " + _self.cl
							}
						},{
							name: "LCL",
							yAxis: _self.lcl,
							label: {
								formatter: "{b} = " + _self.lcl
							}
						}]
					}
				}];
			}
			if(graphType === "P" || graphType === "U"){
				yAxisName = graphType === "P" ? "不合格品率" : "缺陷率";
				maxArr = _.concat(maxArr, uclData, lclData);
				series = [{
					type: "line",
					name: yAxisName,
// 					xAxisIndex: 0,
					data: seriesData,
					itemStyle: {
						color: function(ps) {
							if(_self.sampleData[ps.dataIndex].IS_CONTROL === "N"){
								return "#f00";
							} else {
								return "#4876FF";
							}
						}
					},
					lineStyle: {
						color: "#4876FF"
					},
// 					label: {
// 						show: true
// 					},
					markLine: {
						symbol: "none",
						label: {
							position: "end"
						},
						lineStyle: {
							color: "#f00"
						},
						data: [{
							name: "CL",
							yAxis: _self.cl,
							label: {
								formatter: "{b} = " + _self.cl
							}
						}]
					}
				},{
					type: "line",
					name: "UCL",
// 					symbol: "",
// 					xAxisIndex: 1,
					data: uclData,
					step: "middle",
					lineStyle: {
						color: "#f00"
					}
				},{
					type: "line",
					name: "LCL",
// 					xAxisIndex: 2,
					data: lclData,
					step: "middle",
					lineStyle: {
						color: "#f00"
					}
				}];
			}
			var option = {
				tooltip: {
					show: true,
					trigger: "axis"
				},
				grid: {
					right: '100px'
				},
				xAxis: [{
					type: "category",
					axisTick: {
						alignWithLabel: true
					},
					boundaryGap: false,	//轴线两边留白策略
					data: xAxisData
				}],
				yAxis: [{
					type : "value",
					name: yAxisName,
// 					scale: true,
					max: _.ceil(_.max(maxArr), precision),
					min: _.floor(_.min(maxArr)*0.98, precision),
					splitLine: {
						show: false
					}
				}],
				dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            show: false,
                            type: 'slider',
                            y: '98%',
                            start: 0,
                            end: 100
                        }
                    ],
				series: series
					
			};
			var myChart = echarts.init(document.getElementById('chart'));
			myChart.setOption(option); 
		},
		getChartData: function(_self) {
			_self.sampleData =  $.extend([], window.parent.vm.sampleData);
			_self.ckConfig = window.parent.vm.ckConfig;
			_self.cl = window.parent.vm.cl;
			_self.ucl = window.parent.vm.ucl;
			_self.lcl = window.parent.vm.lcl;
			_self.renderChart(_self, _self.sampleData);
		}
	}
});
</script>
</html>